<template>
  <div class="shop-container">
    <div class="shop-top">
      <img :src="shopInfo.logo" />
      <p class="shop-name">{{ shopInfo.name }}</p>
    </div>
    <div class="shop-center">
      <div class="lefts">
        <div>
          <p>{{ sellsCount }}</p>
          <p>销量</p>
        </div>
        <div class="lefts-two">
          <p>{{ shopInfo.goodsCount }}</p>
          <p>全部宝贝</p>
        </div>
      </div>
      <div class="rights">
        <p v-for="(item, index) in shopInfo.score" :key="index">
          <span class="title">{{ item.name }}</span>
          <span class="fraction" :class="{ fraction1: item.isBetter }">{{
            item.score
          }}</span>
          <span class="isHeight" :class="{ ht: item.isBetter }">{{
            item.isBetter ? "高" : "低"
          }}</span>
        </p>
      </div>
    </div>
    <div class="shop-bottom">
      <button>进店看看</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shopInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    sellsCount() {
      const val = this.shopInfo.sells;
      if (val < 10000) {
        return val;
      } else {
        return parseInt(val / 10000) + "万";
      }
    },
  },
};
</script>

<style scoped>
.shop-container {
  border-top: 3px solid #f4f4f4;
}
.shop-top {
  display: flex;
  margin: 20px 0;
  padding-left: 10px;
}
.shop-top img {
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.shop-name {
  line-height: 50px;
  padding-left: 10px;
}
.shop-center {
  display: flex;
  width: 100%;
}
.lefts {
  display: flex;
  margin-left: 10px;
  border-right: 1px solid #eee;
}
.lefts-two{
  margin-right: 10px;
}
.lefts div {
  flex: 1;
  /* margin-left: 20px; */
}
.lefts div p {
  width: 70px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
}
.rights {
  margin-left: 20px;
  margin-top: -10px;
}
.rights .title {
  font-size: 12px;
}
.fraction {
  display: inline-block;
  width: 40px;
  color: green;
  font-size: 12px;
  padding-left: 5px;
  padding-right: 5px;
}
.fraction1 {
  color: red;
}
.isHeight {
  color: #fff;
  background-color: green;
}
.ht {
  color: #fff;
  background-color: red;
}
.shop-bottom{
  display: flex;
  justify-content: center;
}
.shop-bottom button{
  width: 120px;
  height: 25px;
  border-radius: 10px;
  margin: 20px 0;
}
</style>